/**
 * 设备和PC统计
 * @author ruan
 * @date 2019年12月5日17:53:04
 */
import React, {memo} from 'react';
import {Card, Col, DatePicker, Row, Tabs} from 'antd';
import { FormattedMessage, formatMessage } from 'umi/locale';
import styles from './Analysis.less';
import {Pie, TagCloud} from '@/components/Charts';

const {TabPane} = Tabs;
const {RangePicker} = DatePicker;

const DeviceComputer = memo(
  (
    {
      loading, deviceList, deviceName, systemVersionData, browseData, iOSDeviceVersionList, AndroidDeviceVersionList,
      isActive, selectDate, handleRangePickerChange, rangePickerValue
    }) => (
    <Card loading={loading} bordered={false} bodyStyle={{padding: 0, marginTop: 24}}>
      <div className={styles.salesCard}>
        <Tabs
          tabBarExtraContent={
            <div className={styles.salesExtraWrap}>
              <div className={styles.salesExtra}>
                <a className={isActive('today')} onClick={() => selectDate('today')}>
                  <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day"/>
                </a>
                <a className={isActive('week')} onClick={() => selectDate('week')}>
                  <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week"/>
                </a>
                <a className={isActive('month')} onClick={() => selectDate('month')}>
                  <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month"/>
                </a>
                <a className={isActive('year')} onClick={() => selectDate('year')}>
                  <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year"/>
                </a>
              </div>
              <RangePicker
                value={rangePickerValue}
                onChange={handleRangePickerChange}
                style={{width: 256}}
              />
            </div>
          }
          onChange={activeKey => {
            // console.log(activeKey);
            // handleRangePickerChange(undefined);
          }}
          size="large"
          tabBarStyle={{marginBottom: 24}}
        >
          <TabPane tab="设备统计" key="deviceStat">
            <Row gutter={24}>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  // title={}
                  // extra="extra"
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <Pie
                    hasLegend
                    subTitle="手机设备系统数量"
                    total={() => (
                      <span
                        dangerouslySetInnerHTML={{
                          __html: deviceList ? deviceList.reduce((pre, now) => now.y + pre, 0) : 0,
                        }}
                      />
                    )}
                    data={deviceList}
                    valueFormat={val => <span dangerouslySetInnerHTML={{__html: val}}/>}
                    height={248}
                    lineWidth={4}
                  />
                </Card>
              </Col>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  // title="设备型号"
                  // extra="extra"
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <span>设备型号</span>
                  <TagCloud data={deviceName || []} height={220}/>
                </Card>
              </Col>
            </Row>
          </TabPane>
          <TabPane tab="电脑系统、浏览器统计" key="pcBrowserStat">
            <Row gutter={24}>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <Pie
                    hasLegend
                    subTitle="电脑系统总数量"
                    total={() => (
                      <span
                        dangerouslySetInnerHTML={{
                          __html: systemVersionData ? systemVersionData.reduce((pre, now) => now.y + pre, 0) : 0,
                        }}
                      />
                    )}
                    data={systemVersionData}
                    valueFormat={val => <span dangerouslySetInnerHTML={{__html: val}}/>}
                    height={248}
                    lineWidth={4}
                  />
                </Card>
              </Col>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <Pie
                    hasLegend
                    subTitle="浏览器版本总数量"
                    total={() => (
                      <span
                        dangerouslySetInnerHTML={{
                          __html: browseData ? browseData.reduce((pre, now) => now.y + pre, 0) : 0,
                        }}
                      />
                    )}
                    data={browseData}
                    valueFormat={val => <span dangerouslySetInnerHTML={{__html: val}}/>}
                    height={248}
                    lineWidth={4}
                  />
                </Card>
              </Col>
            </Row>
          </TabPane>
          <TabPane tab="手机系统版本统计" key="mobileStat">
            <Row gutter={24}>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <Pie
                    // hasLegend
                    subTitle="安卓系统总数量"
                    total={() => (
                      <span
                        dangerouslySetInnerHTML={{
                          __html: AndroidDeviceVersionList ? AndroidDeviceVersionList.reduce((pre, now) => now.y + pre, 0) : 0,
                        }}
                      />
                    )}
                    data={AndroidDeviceVersionList}
                    valueFormat={val => <span dangerouslySetInnerHTML={{__html: val}}/>}
                    height={248}
                    lineWidth={4}
                  />
                </Card>
              </Col>
              <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                <Card
                  loading={loading}
                  bordered={false}
                  bodyStyle={{padding: 5}}
                  style={{height: 320}}
                >
                  <Pie
                    // hasLegend
                    subTitle="iOS系统总数量"
                    total={() => (
                      <span
                        dangerouslySetInnerHTML={{
                          __html: iOSDeviceVersionList ? iOSDeviceVersionList.reduce((pre, now) => now.y + pre, 0) : 0,
                        }}
                      />
                    )}
                    data={iOSDeviceVersionList}
                    valueFormat={val => <span dangerouslySetInnerHTML={{__html: val}}/>}
                    height={248}
                    lineWidth={4}
                  />
                </Card>
              </Col>
            </Row>
          </TabPane>
        </Tabs>
      </div>

    </Card>
  )
);

export default DeviceComputer;
